<template>
  <view class="order-card-top">
    <view class="table-info">
      <text v-if="payType" :class="payTypeColorClass" class="pay-type-wrap">{{ payTypeMap[payType] }}</text>
      <text>{{ areaName }}</text>
    </view>
    <view class="status-info">
      <text>{{ statusText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    status: {
      type: [Number, String],
      default() {
        return 1;
      }
    },
    areaName: {
      type: [String],
      default() {
        return "";
      }
    },
    payType: {
      type: [Number],
      default() {
        return 0;
      }
    },
    statusOptions: {
      type: [Array, Object],
      default() {
        return [
          { status: 0, label: "待付款" },
          { status: 1, label: "已付款" }, // 待接单
          { status: 2, label: "待配送" }, // 已接单
          { status: 3, label: "已配送" },
          { status: 4, label: "已收货" },
          { status: 5, label: "已评价" },
          { status: 9, label: "已取消" }
        ];
      }
    }
  },
  computed: {
    statusText() {
      let item = this.statusOptions.find(v => v.status == this.status);
      return item ? item.label : "";
    },
    payTypeMap() {
      return {
        1: "微信",
        2: "支付宝",
        3: "余额"
      };
    },
    payTypeColorClass() {
      if (this.payType == 1) return ["wechat-color"];
      if (this.payType == 2) return ["alipay-color"];
      if (this.payType == 3) return ["balance-color"];
      return [];
    }
  }
};
</script>

<style lang="scss" scoped>
$padding-left: 40rpx;
$padding-top: 20rpx;
$font-size-base: $uni-font-size-lg;
$font-size-ms: $uni-font-size-base;
.order-card-top {
  // background-color: $uni-color-primary;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  // background-color: #c1e8ff;
  overflow: hidden;
  .table-info {
    font-weight: 600;
    font-size: 34rpx;
    max-width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .status-info {
    color: $uni-text-color-grey;
    font-size: $font-size-base;
  }
  .pay-type-wrap {
    margin-right: 20rpx;
    font-size: 24rpx;
    color: #ffffff;
    padding: 3rpx 10rpx;
  }
  .wechat-color {
    background-color: $wechatColor;
  }
  .alipay-color {
    background-color: $alipayColor;
  }
  .balance-color {
    background-color: $balanceColor;
  }
}
</style>